<template>
	<view>
		<view>
			<text>image例子</text>
		</view>
		<!-- aspectFill 短边能完全显示出来 常用  heightFix-->
		<image src="../../static/logo.png" mode="aspectFill">短边能完全显示出来</image>
		<image src="../../static/pic1.png" mode="aspectFit">长边能完全显示出来</image>
		<image src="../../static/pic2.png" mode="heightFix">高度不变，宽度自动变化，保持原图宽高比不变</image>
		<image src="../../static/pic4.jpg" mode="scaleToFill">不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</image>
		<image src="../../static/pic3.webp" mode="center">不缩放图片，只显示图片的中间区域 </image>
		<image src="../../static/chicken.gif" mode="widthFix">宽度不变，高度自动变化，保持原图宽高比不变</image>
	</view>
	<view>
		<view>
			<text>图片轮播图</text>
		</view>
		<view>
			<swiper indicator-dots autoplay interval="3000" duration="1000" circular>
				<swiper-item>
					<image src="../../static/pic2.png" mode="aspectFill" class="img">短边能完全显示出来</image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/pic1.png" mode="aspectFill" class="img">短边能完全显示出来</image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/pic4.jpg" mode="aspectFill" class="img">短边能完全显示出来</image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
swiper {
	width: 500px;
	height: 300px;
	border: 1px solid red;
	swiper-item {
		width: 100%;
		height: 100%;
		.img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
